//third
import React, { memo } from 'react';
import { useDispatch } from 'react-redux';

//utils and other native modules
import { getSizeImage } from '@/utils/format-utils';
import { getSongDetailAction } from '@/pages/player/store/actionCreators';

//style
import { TopRankingWrapper } from './style';

export default memo(function HYTopRanking(props) {
    //props and state
    const {info} = props;
    const {tracks=[]} = info;

    //redux hooks
    const dispatch = useDispatch();
    
    //other handle
    const playMusic = (item) => {  //item是当前播放的歌曲的信息
        console.log(item.id);  //可以获取到当前播放歌曲的id
        // dispatch 一下id， 回到actionCreator里面
        dispatch(getSongDetailAction(item.id));  //接下来执行action中的一系列操作
    }
    return (
        <TopRankingWrapper >
            <div className="header">
                <div className="image">
                    <img src={getSizeImage(info.coverImgUrl)} alt=""/>
                    <a href="/todo" className="image_cover">ranking</a>
                </div>
                <div className="info">
                    <a href="/todo">{info.name}</a>
                    <div>
                        <button className="btn play sprite_02"></button>
                        <button className="btn favor sprite_02"></button>
                    </div>
                </div>
            </div>
            <div className="list">
                {
                    tracks.slice(0,10).map((item, index)=> {
                        return (
                            <div key={item.id} className="list-item">
                                <div className="rank">{index + 1}</div>
                                <div className="info">
                                    <span className="name text-nowrap">{item.name}</span>
                                    <div className="operate">
                                        <button className="btn sprite_02 play" 
                                                onClick={e => playMusic(item)}></button>
                                        <button className="btn sprite_icon2 addto"></button>
                                        <button className="btn sprite_02 favor"></button>
                                    </div>
                                </div>
                                
                            </div>
                        )
                    })
                }
            </div>
            <div className="footer">
                <a href="todo">查看全部》</a>
            </div>
        </TopRankingWrapper>
    )
})
